<template>
  <div class="center-container">
    <el-card>
      <div class="header">
        <div class="tabs">
          <el-tabs v-model="activeName" @tab-click="handleTabsClick">
            <el-tab-pane
              v-for="(item, index) in tabsList"
              :key="index"
              v-bind="item"
            >
              <el-row :gutter="100">
                <el-col :span="16">
                  <component :is="activeName" />
                </el-col>
                <el-col :span="8">
                  <div class="sale-rank">
                    <div class="title">门店{{ storeName }}排名</div>
                    <div class="rank">
                      <el-row
                        v-for="(item, index) in saleList"
                        :key="index"
                        :gutter="10"
                      >
                        <el-col
                          :span="3"
                        ><span
                          :class="{
                            'black-circle': index < 3,
                            'rank-number': true
                          }"
                        >{{ index + 1 }}</span></el-col>
                        <el-col :span="13">{{ item.name }}</el-col>
                        <el-col :span="8">{{ item.number }}</el-col>
                      </el-row>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="date">
          <span
            v-for="(item, index) in data"
            :key="index"
            :class="{ 'active-data': currentDataIndex === index }"
            @click="handleDateClick(index)"
          >
            {{ item }}
          </span>
          <el-date-picker
            v-model="date"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Sale from './Sale.vue'
import Access from './Access.vue'
import getTime from '@/utils/getTime'
export default {
  name: 'Center',
  components: {
    Sale,
    Access
  },
  props: {},
  data() {
    return {
      currentDataIndex: -1,
      tabsList: [
        {
          name: 'Sale',
          label: '销售额'
        },
        {
          name: 'Access',
          label: '访问量'
        }
      ],
      storeName: '销售额',
      data: ['今日', '本周', '本月', '本年'],
      activeName: 'Sale',
      date: '',
      saleList: [
        {
          name: '肯德基',
          number: 323234
        },
        {
          name: '麦当劳',
          number: 299132
        },
        {
          name: '肯德基',
          number: 283998
        },
        {
          name: '海底捞',
          number: 266223
        },
        {
          name: '西贝莜面村',
          number: 223445
        },
        {
          name: '汉堡王',
          number: 219664
        },
        {
          name: '真功夫',
          number: 200997
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleTabsClick(tab) {
      this.storeName = tab.label
    },
    handleDateClick(index) {
      const strategy = {
        0: () => {
          this.date = getTime('day')
        },
        1: () => {
          this.date = getTime('week')
        },
        2: () => {
          this.date = getTime('month')
        },
        3: () => {
          this.date = getTime('year')
        }
      }
      strategy[index]()
      this.currentDataIndex = index
    }
  }
}
</script>

<style scoped lang="scss">
.center-container {
  margin-top: 20px;
  .title {
    font-weight: 600;
  }
  .rank {
    .el-row {
      margin-top: 20px;
      font-size: 14px;
      .black-circle {
        border-radius: 50%;
        background-color: #000;
        color: #fff !important;
      }
      .rank-number {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: pink;
      }
    }
  }
}
.header {
  position: relative;
  .date {
    position: absolute;
    right: 0;
    top: 0;

    .active-data {
      color: purple;
    }
    span {
      margin-left: 10px;
      &:hover {
        color: purple;
        cursor: pointer;
      }
    }
    ::v-deep .el-date-editor {
      margin-left: 20px;
      cursor: pointer;
    }
  }
}
</style>
